<template>
    <div class="listcon">
        <header v-if="matchInfo">
            <p class="title">
                <strong>{{matchInfo.league}}</strong>
                <em>{{matchInfo.begin}}</em>
                <b class="underway">{{matchInfo.state | getstatus}}</b>
            </p>
            <section class="matchcontainer">
                <div>
                    <aside>
                        <img :src="matchInfo.homeLogo" alt="">
                    </aside>
                    <span>{{matchInfo.homeName}}</span>
                </div>
                <div>
                    <strong>
                        {{matchInfo.score}}
                    </strong>
                    <em>{{matchInfo.planCounts}}个方案</em>
                </div>
                <div>
                    <aside>
                        <img :src="matchInfo.visitingLogo" alt="">
                    </aside>
                    <span>{{matchInfo.visitingName}}</span>
                </div>
            </section>
        </header>
        <ul class="lists" v-if="machlists.length>0">
            <li v-for="(item,index) in machlists" :key="index">
                <Tophead :avatar="item.expert.avatar"
                         :nick="item.expert.nick"
                         :state="item.expert.state"
                         :combo="item.expert.combo"
                         :hitRate="item.expert.hitRate | removeper"
                />
                <p class="msg">{{item.title}}</p>
                <Bottominfo :deadline="item.deadline"
                            :back="item.back"
                            :winState="item.winState"
                            :bean="item.bean"
                />
            </li>
        </ul>
        <Nodata v-else type="5"></Nodata>
    </div>
</template>

<script>
    import Bottominfo from '../../components/Bottominfo';
    import Tophead from '../../components/Tophead.vue';
    import Nodata from '../../components/Nodata.vue';
    import {getMytoken} from '../../service/common';
    import {getScoreInfoR, getMatchsByIdR} from '../../service/matchs';
    export default {
        components: {
            Bottominfo, Tophead, Nodata
        },
        data() {
            return {
                issueNo: 0,
                matchInfo: null,
                machlists: []
            };
        },
        filters: {
            getstatus(timeState){
                //timeState (integer, optional): 方案时间状态(0.销售中 1.进行中 2.已结束) ,
                if(timeState === 0) {
                    return '销售中';
                }
                if(timeState === 1) {
                    return '进行中';
                }
                if(timeState === 2) {
                    return '已结束';
                }
            },
        },
        created() {
            this.issueNo = this.$route.params.issueNo;
            this.getmatchInfo(this.issueNo);
            this.getmachlists(this.issueNo);
        },
        computed: {},
        methods: {
            async getmatchInfo(id){
                const {data}=await getScoreInfoR(id);
                if(data && data.code === 0) {
                    this.matchInfo = data.data;

                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            async getmachlists(issueNo){
                const {token}=await getMytoken(true);
                const {data}= await getMatchsByIdR({issueNo, token});
                if(data && data.code === 0) {
                    this.machlists = data.data.plans;
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .listcon {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        header {
            display: flex;
            height: 340px;
            flex-direction: column;
            background: url(//common-1253410441.file.myqcloud.com/activityimg/20171212171659.png) no-repeat center;
            background-size: cover;
            color: #fff;
            .title {
                width: 100%;
                height: 114px;
                justify-content: center;
                display: flex;
                align-items: center;
                text-align: center;
                strong {
                    font-size: @fz28;
                    line-height: 1;
                }
                em {
                    font-size: @fz26;
                    margin: 0 20px;
                    line-height: 1;
                }
                b {
                    font-size: @fz24;
                    .setnormalcss(28px);
                    color: #fff;
                    width: 84px;
                    border-radius: 4px;
                    &.underway {
                        background: @color17;
                    }

                }
            }
            .matchcontainer {
                flex: 1;
                display: flex;
                div {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    aside {
                        width: 124px;
                        height: 124px;
                        box-sizing: border-box;
                        border: 2px solid #93a0a2;
                        display: flex;
                        border-radius: 50%;
                        justify-content: center;
                        align-items: center;
                        background: rgba(0, 0, 0, .6);
                        margin-bottom: 14px;
                        img {
                            width: 104px;
                            height: 104px;
                            border-radius: 50%;
                            display: block;
                        }
                    }
                    span {
                        font-size: @fz32;
                    }
                    strong {
                        font-size: @fz68;
                        margin-top: 10px;
                    }
                    em {
                        .setnormalcss(48px);
                        background: rgba(0, 0, 0, .4);
                        padding: 0 28px;
                        color: #fff;
                        font-size: @fz26;
                        border-radius: 48px;
                    }

                }
            }

        }
    }

    .lists {
        li {
            padding: 30px;
            background: #fff;
            margin-bottom: 10px;
            .msg {
                font-size: @fz28;
                padding: 20px 0;
            }
        }
    }
</style>